<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="js/swiper/swiper.min.css">
    <script src="js/swiper/swiper.min.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/fontSize.js"></script>
    <script src="./js/MusicPlay.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <title>每日时政刷题-时事一点通</title>
    <meta name="keywords" content="时政,时事政治,刷题,时政刷题">
    <meta name="description" content="及时发布每日时政题目,时事一点通喊你来刷题！">
</head>
<body>
<div class="mod-bd loading-body ">
    <!-- w微信分享的图片 -->
    <div class="yindao" style="display: none">
        <img src="./images/mengban.png">
    </div>
    <section class="question-main">
        <div class="logo">
            <i class="icon"></i> <a class="myMusic"> <span
                class="circle music_play play"></span></a>
        </div>
    </section>
    <section class="toup" id="t1">
        <div class="swipers">
            <div class="con">
                <section class="begin-main ">
                    <div class="part_1 "></div>
                    <div class="part_2 "></div>
                    <div class="part_3 "></div>
                    <div class="link_con">
                        <a href="javascript:void(0);" class="jion">开始答题</a>
                    </div>
                    <div class="link_rule">
                        <a href="#">点击“开始答题”，测测自己的水平吧~</a>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="toup" id="t2">
        <div class="swipers">
            <!-- part -->
            <div class="swiper-container">
                <div class="swiper-wrapper" id="div2"></div>
            </div>
            <!-- end -->
        </div>
    </section>
    <section class="toup" id="t3">
        <!-- <div class="logo">
        <img src="images/logo.png"/>
    </div> -->
        <div class="swipers">
            <div class="con">
                <section class="question-main result_main">
                    <!--    <div class="logo"><i class="icon"></i> <a class="myMusic"> <span class="circle music_play play"></span></a></div> -->
                    <div class="result">
                        <div class="con">
                            <p class="tit">测试结果</p>
                            <p class="right">
                                本次共答对了<span class="num"><label id="correctNum"/></span>道题
                            </p>
                        </div>
                        <div class="btn">
                            <div class="btn_again">
                                <a href="/h5/index.html">再答一次</a>
                            </div>
                            <div class="btn_share">
                                <a href="javascript:void(0);" id="btn_share">分享一下</a>
                            </div>
                        </div>
                        <div class="link_download">
                            <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.huashitong.ssydt">更多精彩试题，前往时事一点通APP</a>
                        </div>
                    </div>
                    <div class="copy">版权归华仕通(厦门)教育科技有限公司所有</div>
                </section>
            </div>
        </div>
    </section>
</div>
<script>
    $(function () {
        var correctNum = 0;
        var currentTime = '';

        $.ajax({
            url: "/h5/current-politics/questions",
            type: "GET",
            dataType: "json",
            success: function (data) {
                var _html = "";
                for (var i = 0; i < data.results.length; i++) {
                    _html += '<div class="swiper-slide stop-swiping" id="question-' + i + '">';
                    _html += '<div class="scores ">';
                    _html += '<section class="question-main">';
                    _html += '<div class="topic">';
                    _html += '<div class=" semi-circle">';
                    _html += '<p class="tit"><span>' + (i + 1)
                        + '</span>/<span>'
                        + data.results.length + '</span></p>';
                    _html += '</div>';
                    _html += '<div class="content">';
                    _html += '<div class="msg">'
                        + data.results[i].question + '</div>';
                    _html += '</div>';
                    _html += '</div>';
                    _html += '</section>';
                    _html += '<ul class="choose">';
                    _html += '<li class="input"><input type="radio" name="score" id="1"><label correct="' + data.results[i].options[0].isTrue + '" >'
                        + data.results[i].options[0].answer
                        + '</label></li>';
                    _html += '<li class="input"><input type="radio" name="score" id="2"><label correct="' + data.results[i].options[1].isTrue + '" >'
                        + data.results[i].options[1].answer
                        + '</label></li>';
                    _html += '<li class="input"><input type="radio" name="score" id="3"><label correct="' + data.results[i].options[2].isTrue + '">'
                        + data.results[i].options[2].answer
                        + '</label></li>';
                    _html += '<li class="input"><input type="radio" name="score" id="4"><label correct="' + data.results[i].options[3].isTrue + '">'
                        + data.results[i].options[3].answer
                        + '</label></li>';
                    _html += '</ul>';
                    _html += '</div>';
                    _html += '</div>';
                }
                $("#div2").append(_html);
            }
        });// ajax
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            slidesPerView: 1,
            loop: false,
            /* allowSwipeToNext : false,
            allowSwipeToPrev : false, */
            noSwipingClass: 'stop-swiping',    //禁止左滑动
            observer: true,
            observeParents: true,
        });
        $("#t2,#t3").hide();
        $("a.jion").on("click", function () {
            $("#t1").hide();
            $("#t2").show();
        });
        $('body').on('click', '#div2 label', function () {
            if (Date.now() - currentTime > 1500) {
                var this_active = $(this).parents(".swiper-slide").index();
                setTimeout(function () {
                    dis = ($('.swiper-slide').length - 1);
                    if (this_active == dis) {
                        $("#t2").hide();
                        $("#t3").show();
                    }
                    /* mySwiper.unlockSwipeToNext();  */
                    mySwiper.slideTo(this_active + 1, 1000)
                    /* mySwiper.lockSwipeToNext();  */
                }, 500);
            }
        });
        $('.swiper-button-next').click(function () {
            if (mySwiper.isEnd) {
                $("#t2").hide();
                $("#t3").show();
            }
        })
        $("#btn_share").click(function () {
            $(".yindao").show();
        });
        $(".yindao").click(function () {
            $(".yindao").hide();
        });
        $('body').on('click', '#div2 label', function (e) {
            if (!currentTime || Date.now() - currentTime > 1500) {
                currentTime = Date.now();
                var ans = $(e.target).attr("correct");
                if ("true" == ans) {
                    correctNum = correctNum + 1;
                    $(e.target).addClass("bg_green");
                    $(e.target).parent().append('<audio autoplay="autoplay" style=" width:0;height:0;dispaly:none;"><source src="./css/right.mp3" type="audio/mpeg"/></audio>');
                } else {
                    $(e.target).addClass("bg_red");
                    $(e.target).parent().append('<audio autoplay="autoplay" style=" width:0;height:0;dispaly:none;"><source src="./css/wrong.mp3" type="audio/mpeg"/></audio>');
                    $(e.target).parent().siblings().children().filter("[correct='true']").addClass("bg_green");
                    //$(e.target).parent().siblings().children().not("[correct='false']").addClass("bg_green");

                }
                $("#correctNum").html(correctNum);
            }
        });
    });

    var baseUrl = "";
    $.ajax({
        url: "/h5/current-politics/wx/sdk",
        type: "GET",
        dataType: "json",
        success: function (data) {
            var obj = data.results;
            baseUrl = obj.baseUrl;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，
                // 参数信息会通过log打出，仅在pc端时才会打印。
                appId: obj.appId, // 必填，公众号的唯一标识
                timestamp: obj.timestamp, // 必填，生成签名的时间戳
                nonceStr: obj.nonceStr, // 必填，生成签名的随机串
                signature: obj.signature,// 必填，签名，见附录1
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage',
                    'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }
    });// ajax

    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
        // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才
        // 调用的接口，则可以直接调用，不需要放在ready函数中。
        var title = "每日时政刷题-时事一点通";
        var desc = "及时发布每日时政题目,时事一点通喊你来刷题！";
        var link = baseUrl + "/h5/index.html";
        var imgUrl = baseUrl + "/h5/images/share-img.png";

        //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            }, cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //获取“分享给朋友”按钮点击状态及自定义分享内容接口
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //获取“分享到QQ”按钮点击状态及自定义分享内容接口
        wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
        wx.onMenuShareQZone({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
        wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

    });


</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1272828249'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1272828249' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>